lazy

🧑🏻‍💻 lazy

---

lazy를 사용하면 처음 렌더링될 때까지 컴포넌트 코드의 로딩을 지연시킬 수 있다.

✅ lazy 문법

const SomeComponent = lazy(load)

• 컴포넌트 외부에서 lazy를 호출한다.
• load는 Promise 또는 다른 then 메서드를 가진 Promise와 유사한 객체을 반환하는 함수이다.
• lazy 는 트리에 렌더링할 수 있는 React 컴포넌트를 반환한다. 지연 컴포넌트의 코드가 로딩되는 동안 렌더링을 시도하면 일시 중단된다.

🧑🏻‍💻 알고 가기

---

✅ 주의 사항

• 지연 컴포넌트의 코드가 로딩되는 동안 렌더링을 시도하면 일시 중단된다.
• 모듈의 최상위 레벨에서 선언해야 한다.

✅ 활용 꿀팁

• Promise가 reject되면 React는 가장 가까운 Error Boundary에 reject된 이유를 throw 하기 때문에 로딩하는 동안 로딩 표시기를 보여주려면 <Suspense> 를 함께 사용하자.
• 반환된 Promise 및 Promise의 resolve된 값은 모두 캐시된다.

🧑🏻‍💻 활용 및 생각할 거리

---

✅ <Suspense>와 함께 지연 로딩 컴포넌트 구현하기

• 일반적으로는 정적 import 선언을 사용하여 컴포넌트를 import 하지만, 컴포넌트가 처음 렌더링 될 때까지 로딩을 지연 시키려면 아래와 같이 import를 사용한다.

  import { useState, Suspense, lazy } from 'react';
  import Loading from './Loading.js';
  
  const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));
• 사용자가 체크 박스를 눌러 showPreview state가 참이 된다면, 그때서야 lazy 안에 할당된 MarkdownPreview 렌더링을 시작한다.

  import { useState, Suspense, lazy } from 'react';
  import Loading from './Loading.js';
  
  const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));
  
  export default function MarkdownEditor() {
    const [showPreview, setShowPreview] = useState(false);
    const [markdown, setMarkdown] = useState('Hello, **world**!');
  
    return (
      <>
        <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
        <label>
          <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
          Show preview
        </label>
        <hr />
        {showPreview && (
          <Suspense fallback={<Loading />}>
            <h2>Preview</h2>
            <MarkdownPreview markdown={markdown} />
          </Suspense>
        )}
      </>
    );
  }
• 처음 렌더링 이후에는 렌더링이 캐시되기 때문에 사용자가 다시 체크 박스를 눌렀을 때는 해당 화면이 즉시 나타난다.